<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="小免鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <meta name="keywords" content="小免鲜儿、食品，生鲜、服装、家电电商、购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>小兔鲜-新鲜、惠民、快捷！</title>
    <!-- 按顺序引入：外链式样式表后写的生效 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#">请先登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
                <li><a href="#"><span></span>手机版</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li> <a href="#">首页</a> </li>
                <li> <a href="#">生鲜</a> </li>
                <li> <a href="#">美食</a> </li>
                <li> <a href="#">餐厨</a> </li>
                <li> <a href="#">电器</a> </li>
                <li> <a href="#">居家</a> </li>
                <li> <a href="#">洗护</a> </li>
                <li> <a href="#">孕婴</a> </li>
                <li> <a href="#">服装</a> </li>
            </ul>
        </div>
        <div class="search">
            <input type="text" placeholder="搜一搜">
            <!-- 定位 放大镜 -->
            <span></span>
        </div>
        <div class="car">
            <span>2</span>
        </div>
    </div> 

    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 有多少个图，就有多少个li -->
            <ul>
                <li><a href="#"><img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\images\banner_1.png" alt=""></a></li>
            </ul>
            <!-- 侧导航 -->
            <div class="aside">
                <ul>
                    <li><a href="">生鲜<span>水果 蔬菜</span></a></li>
                    <li><a href="">美食<span>面点 干果</span></a></li>
                    <li><a href="">餐厨<span>数码产品</span></a></li>
                    <li><a href="">电器<span>床品 四件套 被枕</span></a></li>
                    <li><a href="">居家<span>奶粉 玩具 辅食</span></a></li>
                    <li><a href="">洗护 <span>洗发 洗护 美妆</span></a></li>
                    <li><a href="">孕要<span>奶粉 玩具</span></a></li>
                    <li><a href="">服饰<span>女装 男装</span></a></li>
                    <li><a href="">杂货<span>户外 图书</span></a></li>
                    <li><a href="">品牌<span>品牌制透</span></a></li>
                </ul>
            </div>

            <!-- 箭头 -->
            <!-- prev上一个 -->
            <a href="#" class="prev"></a>
            <!-- next下一个 -->
            <a href="#" class="next"></a>

            <!-- 园点 ：当前状态：current/active-->
            <!-- js 找到用户点击的li 添加类名 li变白色的 -->
            <ol>
                <li></li>
                <li></li>
                <li class="current"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- hd header  -->
        <div class="hd wrapper">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span>
                <a href="#">查看全部</a>
            </h2>
        </div>

        <!-- body -->
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#"><img src="./uploads/new_goods_1.jpg" alt="">
                        <h3>客米无线吸尘器F8</h3>
                        <div>￥<span>899</span></div>
                        <b>新品</b>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_2.jpg" alt="">
                        <h3>只能环绕3D空调</h3>
                        <div>￥<span>1299</span></div>
                        <b>新品</b>
                    </a>    
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_3.jpg" alt="">
                        <h3>广东软软糯米煲仔饭</h3>
                        <div>￥<span>129</span></div>
                        <b>新品</b>
                    </a>
                    
                </li>
                <li>
                    <a href="#"><img src="./uploads/new_goods_4.jpg" alt="">
                        <h3>罗西机械智能手表</h3>
                        <div>￥<span>3399</span></div>
                        <b>新品</b>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 人气推荐 -->
    <div class="recommend wrapper">
        <div class="hd wrapper">
            <h2>人气推荐<span>人气爆款 不容错过</span>
                <a href="#"></a>
            </h2>
        </div>
        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112629.jpg" alt="">
                        <h3>特惠推荐</h3>
                    <div><span>我猜得到你的需要</span></div>
                    <b>人气爆款</b>
                    </a>
                    
                </li>

                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112655.jpg" alt="">
                        <h3>爆款推荐</h3>
                        <div><span>人气好物推荐</span></div>
                        <b>人气爆款</b>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112656.jpg" alt="">
                        <h3>场景使用一站买全</h3>
                        <div><span>编辑精心整理</span></div>
                        <b>人气爆款</b>
                </a>
                </li>

                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112710.jpg" alt="">
                        <h3>领券中心</h3>
                        <div><span>发现更多超值优惠券</span></div>
                        <b>人气爆款</b>
                </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 热门品牌 -->
    <div class="hot wrapper">
        <div class="hd wrapper">
            <h2>热门品牌<span>国际经典 品质保证</span></h2>
            <a href="#"></a>
        </div>

        <div class="bd clearfix">
            <ul>
                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_202504251129061.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">

                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_202504251126551.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">

                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112902.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_202504251126551.jpg" alt="">
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="C:\Users\Liu13\Desktop\vs\王晨旭大傻逼\实验二\uploads\微信图片_20250425112901.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="shengxian wrapper">
        <div class="hd wrapper">
            <h2>生鲜</h2>
            <a href="#" class="more">查看全部</a>
            <ul>
                <li><a href="#">水果</a></li>
                <li><a href="#">蔬菜</a></li>
                <li><a href="#">肉禽蛋</a></li>
                <li><a href="#">裤装</a></li>
                <li><a href="#">衬衫</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">内衣</a></li>
            </ul>
    </div>
        <div class="bd clearfix">
            <div class="left">
                <a href="#">
                    <img src="./uploads/fresh_goods_cover.png" alt="">
                </a>
            </div>

            <div class="right">
                <ul>
                    <li><a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_6.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/fresh_goods_8.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 版权区域 -->
    <div class="footer ">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>价格亲民</span>
                    </li>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>物流快递</span>
                    </li>
                    <li>
                        <!-- 通过伪元素添加标签实现精灵图 -->
                        <span>品质新鲜</span>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> |
                    <a href="#">关于我们</a> 
                </p> 
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </div>

</body>
</html>
